<template>
	<view class="body">
		<view class="head">
			<view class="mcava" @click="gomct(showObj)">
				<image :src="showObj.srcs" class="ava"></image>
			</view>
			<view class="mct" @click="gomct(showObj)">
				<view class="name">
					{{showObj.name}}
				</view>
				<view class="message">
					发表时间:
					{{showObj.uptime}}
				</view>
			</view>
		</view>
		<view class="center">
			<view class="commodity">
				<view class="commodityposter">
					<u-swiper
					                :list="list5"
					                @change="e => currentNum = e.current"
					                :autoplay="false"
					                indicatorStyle="right: 20px"
									height="100%"
					        >
					            <view
					                    slot="indicator"
					                    class="indicator-num"
					            >
					                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list5.length }}</text>
					            </view>
					        </u-swiper>
				</view>
				<view class="commodityintro">
					<view class="title">
						<!-- <view class="title_spjs">
							商品介绍
						</view>
						<view class="pricearea">
							价格:
							<view class="price">
								555
							</view>
						</view> -->
					</view>
					
					<view class="introducearea" v-if="showObj.content!=null">
						{{showObj.content}}
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="tophalf">
				<view class="leavingmes">留言</view>
				<view class="userava">
					<image :src="userInfo.avatarUrl" class="userava"></image>
				</view>
				<view class="input">
					 <u--input
					     placeholder="请输入内容"
					     border="surround"
					     v-model="value"
					     @change="change"
					   ></u--input>
				</view>
				<view class="tj">
					<u-button type="primary" icon="checkbox-mark" text="提交" shape="circle" size="small"></u-button>
				</view>
			</view>
			<!-- <view class="bottomhalf">
				<view class="other">
					
				</view>
			</view> -->
		</view>
		<view class="buyframe">
			<!-- <view class="buttonbuy">
				<u-button type="primary" text="购买" @click="toOrder"></u-button>
			</view> -->
			<view class="buttoncontact">
				<u-button type="primary" text="联系ta" @click="phone"></u-button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				list5: [
					 
				 ],
				showObj:null,
				userInfo:'',
			}
		},
		onLoad(options) {
			
			this.showObj=JSON.parse(decodeURIComponent(options.marketitem));
			console.log(this.showObj);
			this.list5.push(this.showObj.imgProduct);
		},
		mounted(){
			this.get();
		},
		methods: {
			phone(){
				uni.navigateTo({
					url:'../mesChat/mesChat'
				})
			},
			get(){
				uni.getStorage({
					key:"user",
					success:(res)=>{
						let _this=this;
						_this.userInfo=res.data.userInfo;
					}
				})
				var that = this;
				console.log(that.showObj.productId)
				this.$axios(
				{
					method:'POST',
					url:'/article/getArticleById',
					params:{
						id:that.showObj.productId,
					}
				}).then(
					res =>{
						console.log(res.data);
					}
				).catch(
					err =>{
						console.log("详细商品"+err);
					}
				)
			},
			gomct(item){
				uni.navigateTo({
					url:'../merchant/merchant?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			change(e) {
			    console.log('change', e);
			},
			toOrder(){
				uni.navigateTo({
					url:'../placeOrder/placeOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	font-family:"Hiragino Sans GB","PingFang SC";
	.buyframe{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 200upx;
		background-color: #FFFFFF;
		// border-radius: 1px;
		border-left: none;
		border-right: none;
		border-bottom: none;
		// border-style: solid;
		border-top: #eeeeef 1upx solid;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-top-right-radius: 15upx;
		border-top-left-radius: 15upx;
		display: flex;
		justify-content: space-around;
		.buttonbuy{
			margin-top: 4%;
			width: 40%;
		}
		.buttoncontact{
			margin-top: 4%;
			width: 40%;
		}
	}
	.head{
		background-color: #eeeeef;
		width: 90%;
		margin-left: 5%;
		margin-top: 5%;
		margin-bottom: 5%;
		height: 200upx;
		overflow:hidden;
		display: flex;
		border-radius: 10upx;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		// box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.mct{
			margin-top: 5%;
			width: 70%;
			height: 130upx;
			// background-color: #2979FF;
			margin-left: 2%;
			display: flex;
			flex-wrap: wrap;
			.name{
				margin-top: 5%;
				width: 100%;
			}
		}
		.mcava{
			height: 130upx;
			width: 130upx;
			// background-color: #000000;
			border: 1upx solid #ffffff;
			border-radius: 50%;
			margin-top: 5%;
			margin-left: 5%;
			.ava{
				height: 130upx;
				width: 130upx;
				border-radius: 50%;
			}
		}
	}
	.center{
		// background-color: #ddd4cf;
		width: 90%;
		margin-left: 5%;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		.commodity{
			width: 100%;
			background-color: #eeeeef;
			// height: 1500upx;
			border-radius: 10upx;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			
			overflow: hidden;
			
			.commodityposter{
				width: 90%;
				margin-top: 5%;
				margin-left: 5%;
				// height: 600upx;
				height: 600upx;
				background-color: #ffffff;
				// border-radius: 15upx;
				
			}
			.commodityintro{
				width: 90%;
				margin-left: 5%;
				// height: 250upx;
				// background-color: #8a86c3;
				padding-top: 2%;
				.title{
					height: 15%;
					width: 100%;
					display: flex;
				}
				.pricearea{
					height: 100%;
					width: 50%;
					// background-color: #fffedf;
					// margin-left: 30%;
					margin-left: 10%;
					display: flex;
					.price{
						margin-left: 10%;
						font-size: 40upx;
						margin-top: -2%;
						font-weight: 800;
						color: red;
					}
				}
				.title_spjs{
					height: 100%;
					width: 40%;
					// background-color: #fffedf;
				}
				.introducearea{
					width: 93.2%;
					border:1upx solid lightgray;
					box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
					// height: 70%;
					background-color: #ffffff;
					margin-top: 2%;
					table-layout: fixed;
					word-wrap: break-all;
					word-break: normal;
					padding: 20upx;
					font-size: 25upx;
					margin-bottom: 20upx;
				}
			}
		}
	}
	.foot{
		margin-top: 40upx;
		width: 90%;
		margin-left: 5%;
		// height: 1500upx;
		background-color: #eeeeef;
		border-radius: 10upx;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		display: flex;
		// flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 240upx;
		.bottomhalf{
			width: 80%;
			margin-left: 10%;
			height: 600upx;
			background-color: #ffffff;
			margin-top: 40upx;
			margin-bottom: 40upx;
		}
		.tophalf{
			width: 80%;
			margin-left: 10%;
			margin-top: 40upx;
			background-color: #ffffff;
			margin-bottom: 40upx;
			padding-left: 10upx;
			border-radius: 10upx;
			height: 220upx;
			border:1upx solid lightgray;
			.tj{
				height: 52upx;
				width: 30%;
				margin-left: 33%;
				margin-top: 20upx;
				
			}
			.leavingmes{
				text-align: center;
			}
			.userava{
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
			.input{
				background-color: #efefef;
				width: 70%;
				margin-left: 20%;
				margin-top: -13%;
				border-radius: 10upx;
			}
		}
	}
}
.indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }
	 .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
</style>
